<template>
  <el-container v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-header height="81px">
      <div class="flex ydsl-top">
        <img src="../../static/images/logo.png" alt="">
        <div class="everyOtherOine"></div>
        <div class="ydslTitle">远东双拉看板</div>
      </div>
    </el-header>
    <el-main class="elMain">
      <div class="ydsl-box">
        <el-carousel indicator-position="outside" :autoplay="autoplay" class="elCarousel" trigger="click">
          <el-carousel-item v-for="(item,index) in device" :key="item.fName">
              <div class="flex ydsl-main-top">
                <img src="../../static/images/facilityImg.jpg" alt="" class="ydsl-img">
                <dl class="ydsl-deviceNumber">
                  <dt>&nbsp;</dt>
                  <dt>设备号：{{device[0].fName}}</dt>
                </dl>
              </div>
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-row class="gaugeBox">
                    <el-col :span="12">
                      <!-- <Vgauge :value="doublePull.fzfzl" :subtext="zjcsubtext"></Vgauge> -->
                      <g2gague :id="'c1'+index" :value='zfzl' :title="'主挤出'" v-if="zfzl>0"></g2gague>
                    </el-col>
                    <el-col :span="12">
                      <g2gague :id="'c2'+index" :value='ffzl' :title="'副挤出'" v-if="ffzl>0"></g2gague>
                      <!-- <Vgauge :value="doublePull.fffzl" :subtext="fjcsubtext"></Vgauge> -->
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="14">
                  <ul class="ydsl-table-box">
                    <li>
                      <div>电耗（kwh）</div>
                      <div>{{doublePull.fdh}}</div>
                    </li>
                    <li>
                      <div>平均厚度（um）</div>
                      <div>{{doublePull.fpjhd}}</div>
                    </li>
                    <li>
                      <div>入口速度（m/min）</div>
                      <div>{{doublePull.frksd}}</div>
                    </li>
                    <li>
                      <div>冷辊速度（m/min）</div>
                      <div>{{doublePull.flksd}}</div>
                    </li>
                    <li>
                      <div>出口速度（m/min）</div>
                      <div>{{doublePull.fcksd}}</div>
                    </li>
                    <li>
                      <div>纵向拉伸</div>
                      <div>{{doublePull.fzxls}}</div>
                    </li>
                    <li>
                      <div>横向拉伸比</div>
                      <div>{{doublePull.fhxlsb}}</div>
                    </li>
                    <li>
                      <div>卷长（m）</div>
                      <div>{{doublePull.fjc}}</div>
                    </li>
                    <li>
                      <div>卷径（mm）</div>
                      <div>{{doublePull.fjj}}</div>
                    </li>
                    <li>
                      <div>主挤出转速（rpm</div>
                      <div>{{doublePull.fzzs}}</div>
                    </li>
                    <li>
                      <div>副挤出转速（rpm）</div>
                      <div>{{doublePull.ffzs}}</div>
                    </li>
                  </ul>
                </el-col>
              </el-row>
              <div class="ydsl-lineBox">
                <!-- <myline :xdata="xdata" :ydata="ydata" :ydata1="ydata1" v-if="zfzl>0"></myline> -->
                <myline ></myline>
              </div>
          </el-carousel-item>
        </el-carousel>
        <!-- <ul class="dotBox">
          <li v-for="item in device" :key="item.id" :class="{active:item.id==activeId}" @click="activeChange(item.id)"></li>
        </ul> -->
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import axios from 'axios'
  import vgauge from './gaugeChart'
  import vline from './lineChart'
  import myline from './mylineChart'
  import g2gague from './g2gauge'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';

  export default {
    name: 'Index',
    components: {
      'Vgauge': vgauge,
      'Vline': vline,
      'myline': myline,
      'g2gague': g2gague,
    },

    data () {
      //var activeId=this.device[0].id;
      return {
        autoplay:true,
        userId: '',
        userName: '',
        tagIndex: '0',
        zjcsubtext:'主挤出',
        fjcsubtext:'副挤出',
        doublePull:'',
        loading: false,
        device:[
          {
            id:1,
            fName:'N02313',
          },
          {
            id:2,
            fName:'N02314',
          },
          {
            id:3,
            fName:'N02315',
          },
        ],
        activeId:0,
        serverData: [
          {year: '2010',value: 3},
          {year: '2011',value: 4},
          {year: '2012',value: 3.5},
          {year: '2013',value: 5},
          {year: '2014',value: 4.9},
          {year: '2015',value: 6},
          {year: '2016',value: 7},
          {year: '2017',value: 9},
          {year: '2018',value: 13},
        ],
        zfzl: 0,
        ffzl: 0,
        miao:0,
        xdata:[],
        ydata:[],
        ydata1:[],
      }
    },

    created(){
      this.userId = getCookie('userId')
      this.userName = getCookie('userName')
      if (this.userId == '' ||this.userId == null) {
        this.$router.push({
          path: "/",
        });
      };
      this.activeId=this.device[0].id;
      this.getDoublePull(0);
      setInterval(this.jishiqi,60*1000);
    },
    mounted() {
      
    },
    methods: {
      //切换tag
      handleSelect (key) {
        this.tagIndex = key;
      },

      //快捷跳转
      toBoard (id, moduleId) {
        this.tagIndex = moduleId;
        // console.log(id)
        // console.log(moduleId)
      },

      //退出
      exit (){
        delCookie('userId')
        this.$router.push({
          path: "/",
        });
      },
      getDoublePull(type){
        this.loading=true;
        this.$ajax.post(this.url+'/Home/DoublePull?type='+type).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.doublePull=res.data[0];
            this.zfzl = parseInt(res.data[0].fzfzl.replace('%',''));
            this.ffzl = parseInt(res.data[0].fffzl.replace('%',''));
            console.log('this.device[0].id',this.device[0].id)
            // this.zfzl = res.data[0].fzfzl.replace('%','');
            // this.ffzl = res.data[0].fffzl.replace('%','');
            //this.getLineData();
          }
          
        }).catch(error => {
          console.log(error);
        })
      },
      activeChange(itemid){
        console.log('changeid',itemid)
        this.activeId=itemid;
        this.getDoublePull(0);
      },
      getLineData(){
       //clearInterval();
        var _this=this;
        this.loading=true;
        this.$ajax.post(this.url+'/Home/DoublePull?type=1').then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            res.data.forEach(function(i){
              _this.xdata.push(i.date);
              _this.ydata.push(i.fzcl);
              _this.ydata1.push(i.ffcl);
            })
            setInterval(this.getLineData,60*1000);
            setInterval(this.jishi,1000);
          }
          
        }).catch(error => {
          console.log(error);
        })
      },
      jishi(){
        if(this.miao==60){
          this.miao=1;
        }else{
          this.miao=this.miao+1;
        }
        console.log('miao',this.miao)
      },
      jishiqi(){
        var myDate = new Date();
        var h =myDate.getHours();       // 获取当前小时数(0-23)
        var m=myDate.getMinutes();     // 获取当前分钟数(0-59)
        var s=myDate.getSeconds();     // 获取当前秒数(0-59)
        console.log(h+':'+m);
        if(h==0&&m==0){
          this.getDoublePull(0);
        }
      },
    }
  }
</script>

<style scoped>
</style>
